<template>
  <div class="out">
    <zHeader pageTitle="商铺合同"></zHeader>
    <div class="pdf-preview-box">
      <div ref="pdfContainer" class="pdfviewer"></div>
    </div>
  </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'

const pdfContainer = ref(null)
const pdfUrl = ref('pdfs/商铺租赁合同（样本）.pdf')

// 动态加载 PDF.js 脚本
const loadPdfJs = () => {
  return new Promise((resolve, reject) => {
    if (window.pdfjsLib) {
      resolve(window.pdfjsLib)
      return
    }

    const script = document.createElement('script')
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js'
    script.onload = () => {
      // 配置 worker
      window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'
      resolve(window.pdfjsLib)
    }
    script.onerror = reject
    document.head.appendChild(script)
  })
}

onMounted(async () => {
  try {
    // 加载 PDF.js 库
    const pdfjsLib = await loadPdfJs()

    // 加载 PDF 文档
    const loadingTask = pdfjsLib.getDocument(pdfUrl.value)
    const pdf = await loadingTask.promise

    // 创建 canvas 容器
    const container = pdfContainer.value
    container.innerHTML = '' // 清空容器

    // 渲染所有页面
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      const page = await pdf.getPage(pageNum)

      // 创建 canvas 元素
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')

      // 设置缩放比例
      const scale = 1
      const viewport = page.getViewport({ scale })

      canvas.height = viewport.height
      canvas.width = viewport.width

      // 渲染页面到 canvas
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }

      await page.render(renderContext).promise

      // 添加页面标题
      if (pdf.numPages > 1) {
        const pageTitle = document.createElement('div')
        pageTitle.textContent = `第 ${pageNum} 页`
        pageTitle.className = 'page-title'
        container.appendChild(pageTitle)
      }

      // 添加 canvas 到容器
      container.appendChild(canvas)
    }

    console.log('PDF 加载完成')
  } catch (error) {
    console.error('PDF 加载失败:', error)
    pdfContainer.value.innerHTML = '<div class="error-message">PDF 加载失败，请检查文件路径</div>'
  }
})
</script>
<style scoped>
.pdf-preview-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background-color: #f5f5f5;
}

.pdfviewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.pdfviewer canvas {
  max-width: 100%;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.page-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 10px 0;
  text-align: center;
}

.error-message {
  color: #ff4444;
  text-align: center;
  padding: 20px;
  font-size: 16px;
}

.pdf-tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ccc;
  background-color: #e9e9e9;
  flex-shrink: 0;
}

.tab-button {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 10px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  border-right: 1px solid #ccc;
  color: #333;
}

.tab-button:last-of-type {
  border-right: none;
}

.tab-button.active {
  background-color: #555;
  color: #fff;
  font-weight: bold;
}

.tab-button:hover:not(.active) {
  background-color: #ddd;
}
</style>
